<!--
  * 单条弹幕组件
  * @author: Ruan Jiazhen
  * @date: 2024-04-16  17:50:09
-->
<template>
  <div class="danmu-item">
    <image
      class="avatar"
      :src="avatar"
      mode="aspectFill"
    />
    <div class="text-wrapper">
      <span
        v-for="(item, index) in showContent"
        :key="index"
        class="text"
        :class="item.highlight ? 'text--highlight' : ''"
        :style="{'--text-color-highlight': props.highlightColor}"
      >
        {{ item.text }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  content:string | DanmuContent,
  avatar: string,
  highlightColor?: string,
};
const props = withDefaults(defineProps<Props>(), { highlightColor: '#FF403C' });

/** 用来在模板中渲染的内容数据，对prop.content进行归一化处理 */
const showContent = computed<DanmuContent>(() => (typeof props.content === 'string'
  ? [{ text: props.content }]
  : props.content));
</script>

<style scoped lang="scss">

.danmu-item {
  overflow: hidden;

  background: rgba($color: #000, $alpha: 40%);
  border-radius: 7.9487vw;

  padding: 2px;
  display: flex;
  column-gap: 4px;
  align-items: center;

  .avatar {
    grid-area: avatar;

    width: 28px;
    height: 28px;
    overflow: hidden;

    border-radius: 50%;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  // 左侧文字
  .text {
    grid-area: text-left;

    color: #fff;

    &--highlight {
      color: var(--text-color-highlight);
    }
  }
}
</style>
